<template>
  <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
    <md-popup-title-bar title="红包" ok-text="确认" cancel-text="取消" @confirm="confirm" @cancel="cancel"></md-popup-title-bar>
    <p class="redmoney_bg_text">红包归司机所有，添加将提高应答率</p>
    <md-picker ref="picker" :data="pickerData" is-view @initialed="onPickerInitialed"></md-picker>
  </md-popup>
</template>
<script>
import { Popup, PopupTitleBar, Picker, Dialog } from 'mand-mobile';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import Loading from '@/components/loading';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'time-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Picker.name]: Picker
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    }
  },
  data() {
    return {
      pickerData: []
    };
  },
  created() {
    var arr = this.getRedMoneyData.split(',');
    var redMoneyArr = [];
    for (let i in arr) {
      var redMoneyList = {
        text: arr[i] + '元',
        value: arr[i]
      };
      redMoneyArr.push(redMoneyList);
    }
    var noRedMony = {
      text: '不添加红包',
      value: ''
    };
    redMoneyArr.unshift(noRedMony);
    this.pickerData.push(redMoneyArr);
  },
  methods: {
    confirm() {
      this.value = false;
      let values = this.$refs.picker.getColumnValues();
      this.$emit('submit', values[0].value);
    },
    cancel() {
      this.value = false;
    },
    onPickerInitialed() {
      this.$refs.picker.refresh();
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  },
  computed: {
    ...mapGetters(['getRedMoneyData'])
  }
};
</script>

<style lang="stylus">
#popup-container {
  .redmoney_bg_text {
    background-color: #fff;
    text-align: center;
    font-size: 22px;
    color: #999;
  }

  .slider {
    width: 200vw;
    transform: translate3d(0, 0, 0);
    transition: transform 0.5s ease-in-out;

    .container {
      background-color: #fff;
      height: 432px;
      width: 100vw;
      float: left;
      font-size: 22px;

      .hint {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 88px;
        font-size: 22px;
        color: color-text-caption;

        .hint-icon {
          width: 26px;
          height: 24px;
        }

        .theme-str {
          color: theme-color;
        }
      }

      .flex-box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 88px;

        .waiting-hint {
          display: -webkit-box;
          font-size: 22px;

          .hint-icon {
            width: 26px;
            height: 24px;
          }

          .hint-str {
            color: theme-color;
          }

          .waiting-hint {
            color: color-text-caption;
            max-width: 25em;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
